<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户信息登记与展示</title>
    <style>
      /* 基础样式 */
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
      }

      body {
        background-color: #f5f5f5;
        color: #333;
        line-height: 1.6;
        padding: 20px;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      h1,
      h2,
      h3 {
        /* margin-bottom: 15px; */
        color: #2c3e50;
      }

      h1 {
        text-align: center;
        margin: 20px 0 30px;
      }

      p {
        margin-bottom: 10px;
      }

      /* 布局样式 */
      .main {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      @media (min-width: 768px) {
        .main {
          flex-direction: row;
        }

        .form-section {
          flex: 1;
          max-width: 30%;
        }

        .table-section {
          flex: 1.5;
          max-width: 70%;
        }
      }

      /* 卡片样式 */
      .card {
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }

      /* 表单样式 */
      .form-group {
        margin-bottom: 15px;
      }
      .form-group.left {
        text-align: right;
      }

      label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 14px;
      }

      input,
      select,
      textarea {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
      }

      input:focus,
      select:focus,
      textarea:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
      }

      .radio-group,
      .checkbox-group {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
      }

      .checkbox-group {
        gap: 20px;
      }

      .radio-group label,
      .checkbox-group label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: normal;
      }

      .radio-group input,
      .checkbox-group input {
        width: auto;
      }

      button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
      }

      button:hover {
        background-color: #2980b9;
      }

      button.secondary {
        background-color: #95a5a6;
      }

      button.secondary:hover {
        background-color: #7f8c8d;
      }

      button.danger {
        background-color: #e74c3c;
      }

      button.danger:hover {
        background-color: #c0392b;
      }

      /* 表格样式 */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
      }
      tr {
        border-bottom: 1px solid #ddd;
      }

      th,
      td {
        padding: 10px;
        text-align: left;
      }

      th {
        background-color: #f8f9fa;
        font-weight: 600;
        font-size: 13px;
      }

      tr:hover {
        background-color: #f8f9fa;
      }

      .table-actions {
        display: flex;
        gap: 10px;
      }

      .table-actions button {
        padding: 5px 10px;
        font-size: 12px;
      }

      .badge {
        display: inline-block;
        background-color: #f1f1f1;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        margin-right: 5px;
        margin-bottom: 5px;
      }

      /* 头部样式 */
      .header {
        margin-bottom: 30px;
        text-align: center;
      }

      .header p {
        color: #7f8c8d;
        font-size: 15px;
      }

      /* 工具栏样式 */
      .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      /* 弹窗样式 */
      .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
      }

      .modal {
        background-color: white;
        border-radius: 5px;
        width: 100%;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
      }

      .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .modal-body {
        padding: 20px;
      }

      .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #ddd;
        text-align: right;
      }

      .detail-item {
        margin-bottom: 15px;
      }

      .detail-item p:first-child {
        color: #7f8c8d;
        font-size: 13px;
      }

      /* 提示消息 */
      .toast {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #2ecc71;
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1001;
      }

      /* 空状态 */
      .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #7f8c8d;
      }

      /* 分页信息 */
      .pagination-info {
        text-align: right;
        font-size: 14px;
        color: #7f8c8d;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app" class="container">
      <!-- 页面标题 -->
      <div class="header">
        <h1>用户信息登记系统</h1>
        <p>填写表单添加用户信息，并在下方表格中查看已添加的用户</p>
        <p>{{ user }}</p>
      </div>

      <div class="main">
        <!-- 表单部分 -->
        <div class="form-section">
          <div class="card">
            <h2>用户信息登记</h2>

            <form>
              <!-- 姓名输入 -->
              <div class="form-group">
                <label for="name"
                  >姓名 <span style="color: #e74c3c">*</span></label
                >
                <!-- 
                vue的v-model为了简化程序员对代码的开发量，允许v-model绑定的某个对象中不存在的属性
                    v-model被操作时，会自动以响应式方式添加该属性
                -->
                <input
                  type="text"
                  id="name"
                  placeholder="请输入姓名"
                  v-model="user.name"
                />
              </div>

              <!-- 性别单选 -->
              <div class="form-group">
                <label>性别 <span style="color: #e74c3c">*</span></label>
                <div class="radio-group">
                  <label>
                    <input
                      type="radio"
                      name="gender"
                      value="M"
                      v-model="user.sex"
                    />
                    男
                  </label>
                  <label>
                    <input
                      type="radio"
                      name="gender"
                      value="F"
                      v-model="user.sex"
                    />
                    女
                  </label>
                  <label>
                    <input
                      type="radio"
                      name="gender"
                      value="U"
                      v-model="user.sex"
                    />
                    其他
                  </label>
                </div>
              </div>

              <!-- 出生日期 -->
              <div class="form-group">
                <label for="birthdate">出生日期</label>
                <input type="date" id="birthdate" v-model="user.date" />
              </div>

              <!-- 爱好多选 -->
              <div class="form-group">
                <label>爱好</label>
                <div class="checkbox-group">
                  <label>
                    <input
                      type="checkbox"
                      value="阅读"
                      v-model="user.interest"
                    />
                    阅读
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      value="运动"
                      v-model="user.interest"
                    />
                    运动
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      value="音乐"
                      v-model="user.interest"
                    />
                    音乐
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      value="旅行"
                      v-model="user.interest"
                    />
                    旅行
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      value="编程"
                      v-model="user.interest"
                    />
                    编程
                  </label>
                  <label>
                    <input
                      type="checkbox"
                      value="烹饪"
                      v-model="user.interest"
                    />
                    烹饪
                  </label>
                </div>
              </div>

              <!-- 学历下拉 -->
              <div class="form-group">
                <label for="education">学历</label>
                <select id="education" v-model="user.edu">
                  <option value="" disabled>请选择学历</option>
                  <option value="高中及以下">高中及以下</option>
                  <option value="专科">专科</option>
                  <option value="本科">本科</option>
                  <option value="硕士">硕士</option>
                  <option value="博士及以上">博士及以上</option>
                </select>
              </div>

              <!-- 提交按钮 -->
              <div class="form-group left">
                <button type="button" @click="addNewItem()">保存信息</button>
              </div>
            </form>
          </div>
        </div>

        <!-- 表格展示部分 -->
        <div class="table-section">
          <div class="card">
            <div class="toolbar">
              <h2>用户信息列表</h2>
              <button class="danger" @click="clearUserList()">清空列表</button>
            </div>

            <!-- 表格 -->
            <table>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>出生日期</th>
                  <th>爱好</th>
                  <th>学历</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-if="userList.length==0">
                  <td colspan="7">查无数据</td>
                </tr>
                <tr v-for="(u,i) in userList" :key="u.id">
                  <td>{{ i+1 }}</td>
                  <td>{{ u.name }}</td>
                  <!-- <td>{{ u.sex=="M"?"男":"女" }}</td> -->
                  <!-- 嵌套三目 -->
                  <!-- <td>{{ u.sex=="M"?"男":u.sex=="F"?"女":"未知" }}</td> -->
                  <!-- 中间常量 -->
                  <td>{{ sexConst[u.sex] }}</td>
                  <td>1990-05-15</td>
                  <td>
                    <span class="badge" v-for="item in u.interest" :key="item"
                      >{{ item }}</span
                    >
                  </td>
                  <td>{{ u.edu }}</td>
                  <td class="table-actions">
                    <button class="danger" @click="removeItem(i)">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>

            <!-- 分页信息 -->
            <div class="pagination-info">
              共 {{ calcCount.size }} 个用户，其中男性{{ calcCount.male
              }}人，女性{{ calcCount.female }}人
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./vue/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            sexConst: {
              M: "男",
              F: "女",
              U: "未知",
            },
            user: {
              // id: null,
              // name: "",
              // sex: "",
              // date: "",
              interest: [],
              edu: "",
            },
            userList: [
              {
                id: 96205949,
                name: "懿轩",
                sex: "M",
                date: "2023-01-23",
                interest: ["游戏", "足球"],
                edu: "本科",
              },
              {
                id: 8642869,
                name: "思",
                sex: "M",
                date: "2023-01-23",
                interest: ["游戏", "足球"],
                edu: "大专",
              },
              {
                id: 7909476,
                name: "金鑫",
                sex: "F",
                date: "2023-01-23",
                interest: ["游戏"],
                edu: "本科",
              },
              {
                id: 85990434,
                name: "峻熙",
                sex: "U",
                date: "2023-01-23",
                interest: ["游戏"],
                edu: "本科",
              },
            ],
          };
        },
        computed: {
          calcCount() {
            return this.userList.reduce(
              (obj, u) => {
                if (u.sex == "M") {
                  obj.male += 1;
                }
                if (u.sex == "F") {
                  obj.female += 1;
                }
                return obj;
              },
              {
                size: this.userList.length,
                male: 0,
                female: 0,
              }
            );
          },
        },
        methods: {
          clearUserList() {
            this.userList = [];
            // vue2 响应式丢失的场景【vue的变更方法】
            // this.userList.length = 0;
            // console.log(this.userList);
          },
          removeItem(i) {
            this.userList.splice(i, 1);
          },
          addNewItem() {
            this.user.id = Math.ceil(Math.random() * 10000);
            // this.user 引用类型数据
            this.userList.push(this.user);
            // 重置表单的对象
            this.user = {
              interest: [],
              edu: "",
            };
          },
        },
      });
    </script>
  </body>
</html>
